<template>
  <div>
    <div class="list">
      <m-card
        v-for="(item, index) in fullList"
        :key="index"
        class="list__item"
      >
        <div
          class="list__item--top"
          v-if="fullList.length > 0"
        >
          <div class="list__item--top--actName">
            <span>{{ item.name }}</span>
            <span
              style="color:#499AF2"
              v-if="item.status === 0"
            >未开始</span>
            <span
              style="color:#FF0000"
              v-if="item.status === 1"
            >进行中</span>
            <span
              style="color:#868686"
              v-if="item.status === 2"
            >已结束</span>
          </div>
          <span class="list__item--top--actTime">活动时间：{{ item.startTime }} 至 {{ item.endTime }}</span>
          <div class="list__item--top--actTime">
            活动商品：{{ item.productNumber }} 件
          </div>
          <div class="list__item--top--account">
            <span>参加人数：{{ item.peopleNum ? item.peopleNum : 0 }}</span>
            <span>支付单数：{{ item.payOrder ? item.payOrder : 0 }}</span>
            <span>应收金额：{{ item.gaapTotal ? item.gaapTotal : "0.00" }}</span>
          </div>
        </div>
        <div
          class="list__item--right"
          v-if="fullList.length > 0"
        >
          <el-button-group>
            <el-button @click="editFullAct(item)">{{
              item.status === 2 ? "查看活动" : "编辑活动"
            }}</el-button>
            <el-button @click="overAct(item)">{{
              item.status === 1 ? "关闭活动" : "删除活动"
            }}</el-button>
          </el-button-group>
        </div>
      </m-card>
      <div
        class="emptyLine"
        v-if="hasList"
      >
        暂无数据~
      </div>
    </div>
    <el-dialog
      :visible.sync="endVisible"
      width="65%"
    >
      <EndContent :chooseItem="chooseItem"></EndContent>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import {
  delFullActivity,
  offFullActivity,
  fullActivityDet,
} from "@/api/fullReduce/fullActive";
import EndContent from "../../common/EndContent.vue";

@Component({
  components: {
    EndContent,
  },
})
export default class Activies extends Vue {
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  fullList: any;

  @Watch("fullList")
  getList() {
    this.hasList = this.fullList.length === 0 ? true : false;
  }

  hasList = false;

  /** 查看结束活动弹窗 */
  endVisible = false;

  /** 选中活动 */
  chooseItem = {};

  /**
   * 编辑/查看活动
   */
  editFullAct(item) {
    if (item.status === 2) {
      this.endVisible = true;
      fullActivityDet(item.id, {}).then((res) => {
        const discountProductVos = res.data.discountProductVos;
        this.chooseItem = { ...res.data.fullScaleVo, discountProductVos };
      });
    } else {
      this.$router.push({ name: "fullRedAdd", params: { id: item.id } });
    }
  }

  /**
   * 提示语
   */
  overAct(item) {
    this.$confirm(
      `确认${item.status === 1 ? "关闭" : "删除"}选中活动吗？${
        item.status === 1 ? "关闭" : "删除"
      }后无法恢复`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      this.dealSure(item);
    });
  }

  /**
   * 关闭/删除活动
   */
  async dealSure(item) {
    const ids = [];
    ids.push(item.id);
    const res =
      item.status === 1
        ? await offFullActivity(2, ids)
        : await delFullActivity(item.id, {});
    if (res.code === 200) {
      this.$message.success(`${item.status === 1 ? "关闭成功" : "删除成功"}`);
      this.$parent.getFullList();
    }
  }
}
</script>

<style lang="scss" scoped>
@include b(list) {
  margin-top: 15px;
  background-color: white;
  @include e(item) {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    @include m(top) {
      width: 500px;
      @include m(actName) {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      @include m(actTime) {
        display: flex;
        font-size: 12px;
        margin-bottom: 10px;
      }
      @include m(account) {
        color: #8b8b8b;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        width: 380px;
      }
    }

    @include m(right) {
      display: flex;
      align-items: center;
    }
  }
}

.emptyLine {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  font-size: 14px;
  color: #b3b3b3;
  border-bottom: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
</style>
